<template>
  <el-card>
    <!-- 表格 -->
    <el-table border style="width: 100%" :data="skuInfo">
      <el-table-column type="index" align="center" label="序号" />
      <el-table-column prop="skuName" label="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" :alt="row.skuName" style="width: 100px; heigth: 100px">
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量（KG）" />
      <el-table-column prop="price" label="价格（元）" />
      <el-table-column label="操作" width="240">
        <template v-slot="{ row }">
          <el-tooltip class="box-item" effect="dark" content="上架" placement="top" v-if="row.isSale === 0"
           >
            <el-button type="success" :icon="Top" size="small"  @click="skuOnSale(row)"/>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="下架" placement="top" v-else >
            <el-button type="danger" :icon="Bottom" size="small" @click="skuCancleSale(row)"/>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="修改" placement="top">
            <el-button type="primary" :icon="Edit" size="small" />
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看详情" placement="top">
            <el-button type="info" :icon="InfoFilled" size="small" />
          </el-tooltip>
          
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" 
              title="确定删除该项数据吗?" @confirm="confirmEvent(row)" @cancel="cancelEvent">
              <template #reference>
                <el-button type="danger" :icon="Delete" size="small" />
              </template>
            </el-popconfirm>
           
    
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination style="margin-top:20px" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
      :page-sizes="[3, 5, 8, 10]" :small="small" :disabled="disabled" :background="background"
      layout=" prev, pager, next, jumper,->,total, sizes," :total=total @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </el-card>
</template>

<script lang="ts">
export default {
  name: "sku"
}
</script>

<script lang="ts" setup>
import { Bottom, Edit, Top, InfoFilled, Delete } from '@element-plus/icons-vue';
import { reqGetSkuInfo, reqGetSkuOnSale, reqGetSkuCancleSale, reqDelSkuInfo } from "@/api/product/sku"
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 设置skuInfo数据
const skuInfo = ref([])
// 分页器数据
const currentPage4 = ref(1)
const pageSize4 = ref(3)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref<number>(0)
// 设置每页展示的数量
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize4.value = val
  // 切换显示页数时 跳转到第一页
  currentPage4.value = 1
  // 重新发送请求
  getSkuListData()
}
// 设置当前点击的页码
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage4.value = val
  // 重新发送请求
  getSkuListData()
}

// 1. 发送请求 获取数据
const getSkuListData = async () => {
  let result = await reqGetSkuInfo(currentPage4.value, pageSize4.value)
  // console.log(result)
  // 设置数据
  skuInfo.value = result.records
  total.value = result.total
}
// 2.上架 与 下架 的切换
const skuOnSale = async (row) => {
 
  await reqGetSkuOnSale(row.id)
  row.isSale = 1 - row.isSale
  ElMessage.success("上架成功！")
}
const skuCancleSale = async (row) => {
  await reqGetSkuCancleSale(row.id)
  row.isSale = 1 - row.isSale
  ElMessage.success("下架成功！")
}

// 3.点击 删除 icon 删除某项sku
const confirmEvent = async (row) => {
  // 3.1 发送请求 删除数据
  await reqDelSkuInfo(row.id)
// 3.2 删除成功提示
  ElMessage.success("数据删除成功！")
  // 3.3 重新获取数据
  getSkuListData()
}
// 4.取消删除
const cancelEvent = () => {
 ElMessage.info("取消删除数据！")
}

onMounted(() => {
  // 发送请求 获取数据
  getSkuListData()

})
</script>

<style >

</style>